<template>
  <a-layout-sider class="sider" width="200">
    <a-menu mode="inline" theme="light" :default-selected-keys="['1']">
      <!-- 动态渲染菜单项 -->
      <a-menu-item
          v-for="item in menuItems"
          :key="item.key"
          class="menu-item"
      >
        <!-- 动态渲染图标 -->
        <component :is="item.icon" v-bind="item.iconProps" />
        <span class="menu-item-text">{{ item.title }}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script setup>
import { ref } from 'vue';
import { HeartTwoTone, StarTwoTone } from '@ant-design/icons-vue';

// 假数据：菜单项
const menuItems = ref([
  { key: '1', icon: HeartTwoTone, iconProps: { twoToneColor: '#eb2f96' }, title: '分类1' },
  { key: '2', icon: StarTwoTone, iconProps: {}, title: '分类2' },
  { key: '3', icon: HeartTwoTone, iconProps: { twoToneColor: '#eb2f96' }, title: '分类3' },
]);
</script>

<style scoped>
.sider {
  background: #ffffff; /* 背景色 */
  padding: 16px 0; /* 上下内边距 */
  display: flex;
  flex-direction: column;
  height: 100%; /* 填满高度 */
}

/* 确保菜单区域占据剩余空间，并启用滚动条 */
.a-menu {
  flex: 1;
  overflow-y: auto;
  border-right: none; /* 去除右边框 */
}

/* 菜单项的基本样式 */
.ant-menu-item {
  border-radius: 8px; /* 圆角 */
  transition: background-color 0.3s, box-shadow 0.3s; /* 平滑过渡效果 */
}

.ant-menu-item:hover {
  background-color: #e6f7ff; /* 鼠标悬浮时的背景色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.ant-menu-item.ant-menu-item-selected {
  background-color: #1890ff; /* 选中项的背景色 */
  color: #ffffff; /* 选中项的文字颜色 */
}

/* 菜单项文本样式 */
.menu-item-text {
  margin-left: 8px; /* 文本与图标的间距 */
  font-size: 16px; /* 字体大小 */
}

/* 调整图标大小和对齐 */
.ant-menu-item .anticon {
  font-size: 18px; /* 图标大小 */
  vertical-align: middle; /* 垂直对齐 */
}
</style>
